import { useEffect, useState, Key } from 'react';
import { Tooltip, Table, Card, Button, Form, Input, message } from 'antd';
import type { ColumnsType } from 'antd/lib/table';
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import "./index.less";
import { reqDeleteHospitalList, deleteHospital, reqGetHospitalSetList } from '@api/hospital/hospitalSet'
import { HospitalSetList, SearchParams } from '@api/hospital/model/hospitalSettypes'
import { useNavigate } from "react-router-dom"
import { useTranslation } from "react-i18next"



export default function HospitalSet() {
    const{t} = useTranslation(["app"])
    const [hospitalList, setHospitalList] = useState<HospitalSetList[]>([]);
    const [loading, setloading] = useState(false);
    const [total, settotal] = useState(0);
    const [pageSize, setpageSize] = useState(5);
    const [current, setcurrent] = useState(1);
    const [lastHosname, setLasthosname] = useState('');
    const [lastHoscode, setLasthoscode] = useState('');
    const [form] = Form.useForm();

    const getHospitalSetList = async (current: number, pageSize: number, hosname?: string, hoscode?: string) => {
        setloading(true)

        const res = await reqGetHospitalSetList({
            page: current,
            limit: pageSize,
            hosname,
            hoscode,

        })
        setcurrent(current)
        setpageSize(pageSize)
        setHospitalList(res.records)
        settotal(res.total)
        setloading(false)
    }
    useEffect(() => {
        getHospitalSetList(current, pageSize);
    }, []);
    const onFinish = (values: SearchParams) => {
        const { hosname = "", hoscode = "" } = values;
        setLasthosname(hosname as string)
        setLasthoscode(hoscode as string)
        getHospitalSetList(1, 5, hosname, hoscode)
    }
    const reset = () => {
        // 清空表单内容
        form.resetFields();
        // 重新获取数据展示
        getHospitalSetList(1, 5);
        setLasthosname("")
        setLasthoscode("")
    };
    const navigate = useNavigate();
    const goAddHospital = () => {
        navigate("/syt/hospital/hospitalSet/add")
    }
    const goUpdateHospital = (id: number) => {
        return () => {
            navigate(`/syt/hospital/hospitalSet/edit/${id}`)
        }
    }
    const removeHospital = (id: number) => {
        return async () => {
            await deleteHospital(id)
            getHospitalSetList(current, pageSize, lastHosname, lastHoscode)

        }
    }
    const columns: ColumnsType<HospitalSetList> = [
        {
            title: '序号',
            render: (row, record, index) => index + 1,
            width: 70,
            align: 'center',
        },
        {
            title: t("hosname"),
            dataIndex: 'hosname',
        },
        {
            title: '医院编号',
            dataIndex: 'hoscode',
        },
        {
            title: 'api基础路径',
            dataIndex: 'apiUrl',
        },
        {
            title: '签名',
            dataIndex: 'signKey',
        },
        {
            title: '联系人姓名',
            dataIndex: 'contactsName',
        },
        {
            title: '联系人手机',
            dataIndex: 'contactsPhone',
        },
        {
            title: '操作',
            render: (row) => {
                return <>
                    <Tooltip placement="top" title="修改医院">
                        <Button type="primary" icon={<EditOutlined />} onClick={goUpdateHospital(row.id)}></Button>
                    </Tooltip>
                    <Tooltip placement="top" title="删除医院">
                        <Button type="primary" danger className="ml" icon={<DeleteOutlined />} onClick={removeHospital(row.id)}></Button>
                    </Tooltip>
                </>
            },
            fixed: 'right',
            width: 120,
        },
    ];
    const [selectedHospitalIds, setSelectedHospitalIds] = useState<Key[]>([]);
    const rowSelection = {
        onChange: (
            selectedRowKeys: Key[]
        ) => {
            setSelectedHospitalIds(selectedRowKeys);
        },
    };
    const deleteHospitalList = async () => {
        console.log(selectedHospitalIds)
        await reqDeleteHospitalList(selectedHospitalIds)
        message.success("批量删除成功")
        getHospitalSetList(current, pageSize)
    }
    return (
        <Card>
            <Form layout="inline" form={form} onFinish={onFinish}>
                <Form.Item name='hosname'>
                    <Input placeholder="医院名称" />
                </Form.Item>
                <Form.Item name='hoscode'>
                    <Input placeholder="医院编号" />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" icon={<SearchOutlined />} htmlType='submit'>查询</Button>
                    <Button className="ml" onClick={reset}>清空</Button>
                </Form.Item>
            </Form>
            <Button type="primary" onClick={goAddHospital}>添加</Button>
            <Button type="primary" danger className="ml mt" disabled={!selectedHospitalIds.length} onClick={deleteHospitalList}>批量删除</Button>
            <Table columns={columns} dataSource={hospitalList} bordered scroll={{ x: 1300 }} loading={loading}
                rowSelection={rowSelection}
                rowKey="id"
                pagination={{
                    current,
                    pageSize,
                    total,
                    pageSizeOptions: [5, 10, 15, 20],
                    showSizeChanger: true,
                    showQuickJumper: true,
                    showTotal: (a) => `总共：${a}`,
                    onChange: (current, pageSize) => {
                        getHospitalSetList(current, pageSize, lastHosname, lastHoscode)

                    }
                }} />
        </Card >
    );
}